import React, { Component } from 'react';
import { Button, Form, Input, Modal, Space, DatePicker, Select, Switch, Radio } from 'antd'
import GoBack from '@/components/TheGoBack'
import TheTable from "@/components/TheTable"
import TheButton from '@/components/TheButton';
import ThePagination from '@/components/ThePagination';
import { apiGetOrderPage } from '@/request/order'
const { Option } = Select
export default class petInfo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            orderCode:'',
            columns: [
                {
                    title: "订单编号",
                    dataIndex: "orderCode",
                    key: "orderCode",
                    width:200
                },
                {
                    title: "订单类型",
                    dataIndex: "orderTypeCode",
                    key: "orderTypeCode",
                    render: (text) => {
                        if (text == '1') return '线上'
                        if (text == '2') return '线下'
                    }
                },

                {
                    title: "支付状态",
                    dataIndex: "payState",
                    key: "payState",

                    render: (text) => {
                        if (text == 1) return '未支付'
                        if (text == 2) return '支付完成'
                        if (text == 3) return '支付失败'

                    }
                },
                {
                    title: "订单总金额",
                    dataIndex: "orderTotalPrice",
                    key: "orderTotalPrice",
                    render: (text) => {
                        return <React.$Price price={text} />
                    }

                },
                {
                    title: "订单实付金额",
                    dataIndex: "orderPayPrice",
                    key: "orderPayPrice", render: (text) => {
                        return <React.$Price price={text} />
                    }

                },
                {
                    title: "付款时间",
                    dataIndex: "payTime",
                    key: "payTime",

                },
                {
                    title: "订单创建时间",
                    dataIndex: "createTime",
                    key: "createTime",

                },
                {
                    title: "操作",
                    render: (text) => {
                        return (
                            <div>
                                {
                                    text.orderTypeCode == 1 ? <TheButton onClick={() => this.props.history.push('/order/details/' + text.orderId)} >查看详情</TheButton> :
                                        <TheButton onClick={() => this.props.history.push('/cashier/order/details/' + text.orderId)} >查看详情</TheButton>
                                }

                            </div>
                        )
                    }
                }
            ],
            dataSource: [],
            isModalVisible: false,
            stortPetArchivesId: '',
            modalTitle: '新增',
            pageNo: 1, pageSize: 10, total: 0,
            loading: false,
            petName: '',
            petSpecies: null
        }
    }
    formRef = React.createRef()
    componentDidMount() {

        this.getData()
    }
    async getData() {
        this.setState({ loading: true })
        let { pageSize, pageNo } = this.state
        console.log(this.props.match);
        await apiGetOrderPage({ memberId: this.props.match.params.memberId, pageSize, pageNo, orderCode:this.state.orderCode?this.state.orderCode:''}).then(res => {
            if (res.data && res.code === 0) {
                this.setState({
                    dataSource: res.data,
                    pageNo: res.pageNo,
                    pageSize: res.pageSize,
                    total: res.totalCount
                })
            }
        })
        this.setState({ loading: false })
    }


    pageChange = (e) => {
        this.setState({
            pageNo: e
        }, () => {
            this.getData()
        })

    }

    search() {
        this.setState({
            pageNo: 1,
            pageSize: 10
        }, () => {
            this.getData()
        })
    }
    changePaeams(e, key) {
        console.log(e, 'eee');

        this.setState({
            orderCode: e.target.value
        })

    }
    render() {
        const { pageNo, pageSize, total, columns, dataSource, isModalVisible, modalTitle, loading, petName, petSpecies,orderCode } = this.state
        return (
            <div className="commodity-list-detail p-layout-box">
                <GoBack history={this.props.history} title={'消费记录'} />
                <div style={{ 'marginTop': 20 }}>
                    <div style={{ marginBottom: 10 }}>
                        <Input allowClear placeholder="订单编号" maxLength={60} value={orderCode} style={{ width: 200, marginRight: 10 }} onChange={(e) => this.changePaeams(e)} />
                        <Button onClick={() => this.search()} style={{ marginRight: 10 }} type='primary'>搜索</Button>
                    </div>
                    <TheTable columns={columns} dataSource={dataSource} />
                    <ThePagination pageNo={pageNo}
                        pageSize={pageSize}
                        total={total}
                        pageChange={this.pageChange}></ThePagination>
                </div>

            </div>
        );
    }
}
